---
title: Storybook for React with Vite
hideRendererSelector: true
sidebar:
  order: 5
  title: React (Vite)
---

Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Vite](https://vitejs.dev/).

## Install

To install Storybook in an existing React project, run this command in your project's root directory:

<CodeSnippets path="create-command.md" variant="new-users" copyEvent="CreateCommandCopy" />

You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).


### Requirements

<GetStartedVersions versions={[{
  name: 'React',
  range: '≥ 16.8',
  icon: '/images/logos/renderers/logo-react.svg'
}, {
  name: 'Vite',
  range: '≥ 5',
  icon: '/images/logos/builders/vite.svg'
}]} />


## Run Storybook

To run Storybook for a particular project, run the following:

<CodeSnippets path="storybook-run-dev.md" />

To build Storybook, run:

<CodeSnippets path="build-storybook-production-mode.md" />

You will find the output in the configured `outputDir` (default is `storybook-static`).


## FAQ
### How do I migrate from the React Webpack framework?

The `upgrade` command should prompt you to migrate to `@storybook/react-vite` when you run it:

{/* prettier-ignore-start */}

<CodeSnippets path="storybook-upgrade.md" />

{/* prettier-ignore-end */}

In case that auto-migration does not work for your project, refer to the manual installation instructions below.

### How do I manually install the React framework?

First, install the framework:

{/* prettier-ignore-start */}

<CodeSnippets path="react-vite-install.md" />

{/* prettier-ignore-end */}

Then, update your `.storybook/main.js|ts` to change the framework property:

{/* prettier-ignore-start */}

<CodeSnippets path="react-vite-add-framework.md" />

{/* prettier-ignore-end */}


## API

### Options

You can pass an options object for additional configuration if needed:

{/* prettier-ignore-start */}

<CodeSnippets path="react-vite-framework-options.md" />

{/* prettier-ignore-end */}

#### `builder`

Type: `Record<string, any>`

Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
